import React, {Component} from 'react';
import { base } from 'nc-lightapp-front';
import OrgRefer from 'src/hrpub/common/components/referSearch/org';
import NCBackBtn from 'src/hrpub/common/components/hr-back';
import "src/hrpub/common/static/fonts/iconfont.css";
import './index.less';
const { NCSelect, NCDatePicker } = base;
const NCOption = NCSelect.NCOption;
const {NCRangePicker} = NCDatePicker;
class Header extends Component {
    constructor(props) {
        super(props);
        this.state = {
            orgValue: {},
            backBtnVisible: false,
            paginationShow: false,
            cardPaginationDis: true,
            orderStatus: ['-1', '3'],
            timeRange: 'oneWeek',
            time: {
                "beginTime":"",
                "billStatus":"all",
                "endTime":"",
                "time":"oneWeek"
            },
            timerRangeValue: []

        }
        this.changeOrderStatus = this.changeOrderStatus.bind(this);
        this.changeOrderRange = this.changeOrderRange.bind(this);
        this.changeOrderTime = this.changeOrderTime.bind(this);
    }
    // 组织参照发生改变触发
    handleTreeChange(value) {
        this.setState({
            pk_org: value.pk_org,
            orgValue: value
        }, function () {
            setTimeout(() => {
                this.props.checkOrDeleteOrg(value.refpk)
            }, 100)
        })
    }
    // 点击各按钮处理函数
    buttonClickHandle (props, btnCode) {
        this.props.BtnOperationFun(btnCode)
    }
    // 设置返回按钮显示隐藏
    setBackBtnVisible (backBtnVisible) {
        this.setState({
            backBtnVisible
        })
    }
    // 点击返回按钮
    backBtnClick () {
        let {button} = this.props
        let btnData = button.getButtons()
        let saveBtnStatus = null
        let props = this.props
        for (let i=0; i < btnData.length; i++) {
            if (btnData[i].key === 'save') {
                saveBtnStatus = btnData[i].visible
                break
            }
        }
        if (saveBtnStatus) {
            this.props.cancelOpreation()
            return false
        }
        props.setCardListVisible('tableList')
        this.setBackBtnVisible(false)
        this.setCardPaginationConDis(false)
        props.setBtnVisibleAndDisable('addDeleteMakeEffectRefreshQuery');
    }
    handlePageInfoChange (props, flag, status) {
        props.cardPagination.setCardPaginationId({ id: flag, status: status });
        this.props.initDataShow(flag)
        let record = {
            values: {pk_ctrtmng: {value: flag}}
        }
        this.props.setRecord(record)
    }
    // 设置卡片容器显示隐藏
    setCardPaginationConDis (cardPaginationDis) {
        this.setState({
            cardPaginationDis
        })
    }
    // 设置卡片分页显示隐藏
    setCardPaginationVisible (cardPaginationDis, paginationShow, pk_ctrtmng) {
        this.setState({
            cardPaginationDis,
            paginationShow
        }, function () {
           if (pk_ctrtmng) {
                let {cardPagination} = this.props
                cardPagination.setCardPaginationId({id: pk_ctrtmng, status: 1});
           }
        })
    }
    // 给人力组织赋值
    setOrgValue (orgValue) {
        this.setState({
            orgValue
        })
    }

    // 获取选择范围状态列表内容
    getOrderStatusList (){
        let { json } = this.props;
        if( JSON.stringify(json) !== '{}' ){
            let orderStatusList = [{
                key: 'all',
                    label: json['hrcm-000052'], // 全部
                }, {
                    key: '-1',
                    label: json['hrcm-000053'], // '自由态'
                }, {
                    key: '3',
                    label: json['hrcm-000054'], // 提交
                }, {
                    key: '2',
                    label: json['hrcm-000055'], // 审批进行中
                }, {
                    key: '1',
                    label: json['hrcm-000056'], // 审批通过
                }, {
                    key: '0',
                    label: json['hrcm-000057'], // 审批未通过
                }
            ]
            return orderStatusList;
        }
    }
    // 获取选择范围时间列表内容
    getTimeRangeList () {
        let { json } = this.props;
        if( JSON.stringify(json) !== '{}'  ){
            let timeRangeList = {
                'oneWeek': json['hrcm-000058'], // 一周内
                'oneMonth': json['hrcm-000059'], // 一个月内
                'threeMonth': json['hrcm-000060'], // 三个月内
                'custom': json['hrcm-000061'], // 自定义
            }
            return timeRangeList;
        }
    }
    // 头部筛选框选择单据状态
    changeOrderStatus (value, status){
        let selectVal = [];
        if( status.includes('all') && value.length > 1){
            value.map((item, index)=>{
                if(item !== 'all'){
                    selectVal.push(item)
                }
            })
            this.setState({
                orderStatus: selectVal
            },()=>{
                this.combileChangeOrder();
            })
        }else{
            if(value.includes('all')){
                this.setState({
                    orderStatus: ['all']
                },()=>{
                    this.combileChangeOrder();
                })
            }else{
                this.setState({
                    orderStatus: value
                },()=>{
                    this.combileChangeOrder();
                })
            }
        }
    }
    // 头部筛选框选择单据时间范围
    changeOrderRange (range){
        let { time, orderStatus } = this.state;
        time.beginTime = '';
        time.endTime = '';
        if( range === 'custom' ){
            time.time = '';
        }else{
            time.time = range;
        }
        this.setState({
            timeRange: range,
            timerRangeValue: [],
            time
        },()=>{
            range !== 'custom' ? this.combileChangeOrder() : null;
        })
    }

    // 头部筛选框选择单据时间自定义范围
    // "beginTime":"","billstate":"-1,3","endTime":"","time":"threeMonth"}
    changeOrderTime ( times ){
        let { time, orderStatus } = this.state;
        time.billStatus = orderStatus;
        time.beginTime = times[0];
        time.endTime = times[1];
        this.setState({
            timerRangeValue: times,
            time
        },()=>{
            this.combileChangeOrder();
        })
    }

    // 头部筛选选择单据结合调用
    combileChangeOrder (){
        let { orderStatus, time, pk_org } = this.state;
        let selectObj = [], obj;
        time.billStatus = orderStatus;
        orderStatus.map((item, index)=>{
            obj =  {
                "field":"sign_state",
                "value":{
                    "firstvalue": "1",
                    "secondvalue": ""
                }
            }
            console.log(item, index);
            obj.value.firstvalue = item;
            selectObj.push(obj);
        });
        let conditions = {
            "querycondition":{
                "logic":"and",
                "conditions": selectObj
            },
            "nctz":8
        }
        let allSelect = {};
        Object.assign(allSelect, conditions, time);
        this.props.fliterListData(allSelect);  
        this.props.getTime && this.props.getTime(time)
    }

    render () {
        let {button, cardPagination, fromApprove, pk_org} = this.props;
        let {createCardPagination} = cardPagination;
        let { orderStatus, timeRange, timerRangeValue } = this.state;
        let orderStatusList = this.getOrderStatusList();
        let timeRangeList = this.getTimeRangeList();
        return (
            <div className="header nc-bill-header-area">
                <div className="header-panel left">
                    { fromApprove ? null :
                        this.state.backBtnVisible ? 
                        <NCBackBtn 
                            // title={'返回'}
                            onClick={this.backBtnClick.bind(this)}/> :
                        <div className="top-left">
                            <div className="top-orgRefer">
                                <OrgRefer
                                    getOrgData={this.handleTreeChange.bind(this)}
                                    orgVal={this.state.orgValue}
                                />
                            </div>
                            { !!pk_org && orderStatusList ? <React.Fragment>
                                <span className="top-applyStatus">
                                    <NCSelect
                                        multiple={true}
                                        showClear={false}
                                        style={{
                                            width: '160px'
                                        }}
                                        placeholder={'全部'}
                                        onChange={this.changeOrderStatus}
                                        value={orderStatus}
                                    >
                                        {orderStatusList.map((item) => {
                                            return (
                                                <NCOption
                                                    key={item.key}
                                                >
                                                    {item.label}
                                                </NCOption>
                                            );
                                        })}
                                    </NCSelect>
                                </span>
                                <span className="top-timeRange">
                                    <NCSelect
                                        style={{
                                            width: '140px'
                                        }}
                                        showClear={false}
                                        onChange={this.changeOrderRange}
                                        value={timeRange}
                                    >
                                        {Object.keys(timeRangeList).map((key) => {
                                            return (
                                                <NCOption
                                                    key={key}
                                                >
                                                    {timeRangeList[key]}
                                                </NCOption>
                                            );
                                        })}

                                    </NCSelect>
                                </span>
                                {timeRange === 'custom' ? <span
                                        className="top-timeRange"
                                        style={{
                                            width: '213px'
                                        }}
                                    >
                                        <NCRangePicker
                                            placeholder={'开始日期 - 结束日期'}
                                            onChange={this.changeOrderTime}
                                            value={timerRangeValue}
                                        />
                                    </span> : null}
                            </React.Fragment> : null }
                            
                        </div>
                    }
                </div>
                <div className="btn-group">
                    {
                        button.createButtonApp({
                            area: 'head',
                            onButtonClick: this.buttonClickHandle.bind(this)
                        })
                    }
                    <div className="cardPagination" style={{display: this.state.cardPaginationDis ? 'inline-block' : 'none'}}>
                        {
                            this.state.paginationShow ? createCardPagination({
                                handlePageInfoChange: this.handlePageInfoChange.bind(this),
                                urlPkname: 'cardPaginationExtend'
                            }) : ''
                        }
                    </div>
                </div>
            </div>
        )
    }
}

export default Header